<template>
  <div class="top">
    <h1>人口增长对社会影响可视化分析</h1>
    <div class="dao">{{ item }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const item = ref('2022-01-01')
const gettime = () => {
  const DateTime = new Date()
  const year = DateTime.getFullYear()
  const month = DateTime.getMonth() + 1
  const day = DateTime.getDate() + ''
  const hour = DateTime.getHours() + ''
  const minute = DateTime.getMinutes() + ''
  const second = DateTime.getSeconds() + ''
  item.value = `${year}/${String(month).padStart(2, '0')}/${String(day).padStart(
    2,
    '0'
  )}日-${String(hour).padStart(2, '0')}时${String(minute).padStart(2, '0')}分${String(
    second
  ).padStart(2, '0')}秒`
  onMounted(() => {
    setInterval(gettime, 1000)
  })
}
gettime()
</script>

<style lang="scss">
.top {
  width: 1920px;
  height: 105px;
  background-image: url('../../image/head_bg.png');
  position: relative;
}
h1 {
  text-align: center;
  color: rgba(60, 107, 247, 0.845);
  font-size: 30px;
  line-height: 105px;
}
.dao {
  position: absolute;
  top: 30px;
  right: 60px;
  color: rgba(60, 107, 247, 0.845);
  font-size: 20px;
}
</style>